<template>
    <view class="page">
        <view class="modal-mask" @tap="hideModal" v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <!-- 弹出层 -->
        <view v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodetextbox">
                    <view class="time-box2">
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                        <view class="qrcodetext">选择会员</view>
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                    </view>
                    <image class="done" @tap="done" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                </view>

                <view class="qrcodebox">
                    <view class="qrcodetextbox2">
                        <input
                            class="input-phone-up"
                            maxlength="11"
                            @input="blurPhone2"
                            value=""
                            placeholder="请输入顾客手机号码"
                            placeholder-class="placeholder-style2"
                            type="text"
                        />
                        <view class="inquire2" @tap="inquire2">查询</view>
                    </view>
                    <!-- <view class="phone-hint2" wx:if="{{ishint}}">
      输入正确手机号
    </view> -->
                    <view class="replace-box" v-if="memberLists.mobile">
                        <view class="replace-lt">
                            <image class="girl2" mode="aspectFill" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/girl.png"></image>
                            <view>
                                <view class="lt-nname">{{ memberLists.userName }}</view>
                                <view class="lt-hpone2">{{ memberLists.mobile }}</view>
                            </view>
                        </view>
                        <view class="replace-rl" @tap="replace">去替换</view>
                    </view>
                </view>
                <view class="qrcodeicon">
                    <view class="qrcodeiconbox" v-for="(item, index) in serviceList" :key="index">
                        <image class="wechatvip" :src="item.img"></image>

                        <P class="wechattext">{{ item.title }}</P>
                    </view>
                </view>
            </view>
        </view>
        <view class="cardsale-box">
            <view class="phone-box">手机号码：</view>
            <input class="input-phone" maxlength="11" @input="blurPhone" value="" :placeholder="phone" placeholder-class="placeholder-style" type="text" />
            <button class="inquire" @tap="searchList" :disabled="isDisabled">查询</button>

            <view class="phone-hint" v-if="ishint">输入正确手机号</view>
        </view>
        <!-- 老顾客 -->
        <view v-if="memberStatus == 1">
            <view class="cardsale-conter">
                <view class="cardsale-title">
                    <view class="title-name1">小意助手</view>
                    <view class="title-name2">此号码是店里老顾客，资料如下：</view>
                </view>
                <view class="shop-message">
                    <view class="shop-lt">
                        <image v-if="memberList.headPicture" mode="aspectFill" class="lt-profile" :src="memberList.headPicture"></image>
                        <image class="lt-profile" mode="aspectFill" v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/profile-hai.png"></image>
                        <view class="lt-name">
                            <view class="lt-namess">
                                <view class="userNameaa">{{ memberList.userName }}</view>
                                <view class="lt-shopvip" v-if="memberList.storeVip != ''">{{ memberList.storeVip }}</view>
                            </view>
                            <view class="lt-phone">{{ memberList.mobile }}</view>
                        </view>
                    </view>
                    <view class="shop-rl">
                        <view class="rl-vipbox">
                            <view class="rl-vip">{{ memberList.memberVip }}</view>
                            <view class="rl-remaining">余额：¥{{ memberList.balance }}</view>
                        </view>
                        <image @tap="ElasticFrameClick" class="replace" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/replace.png"></image>
                    </view>
                </view>
                <view></view>
                <!-- 开卡 -->
                <view class="type-cardbox" v-if="type == 1" v-for="(item, index) in serviceCard" :key="index">
                    <view class="shopcard-title">
                        <view class="title2-name">{{ item.cardName }}</view>
                        <view class="cicard" v-if="item.cardType == 1">次卡</view>
                        <view class="cicard" v-if="item.cardType == 2">时卡</view>
                    </view>

                    <view class="cicard-info">
                        <view class="cicard-infoconter">
                            <view class="cards-name">{{ item.cardName }}</view>
                            <view class="cards-bt">
                                <view class="bt-time">
                                    有限时间：
                                    <text>{{ item.expiration }}</text>
                                </view>
                                <view class="frequency" v-if="item.cardType == 1">
                                    剩余次数
                                    <text>{{ item.times }}</text>
                                    次
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 充值 -->
                <view class="recharge-box" v-if="type == 2">
                    <view class="recharge-title">
                        <view class="cli"></view>
                        <view class="recharge-text">充值信息</view>
                    </view>
                    <view class="recharge2-title">
                        <view class="recharge-text">
                            <text style="color: #e94a18">*</text>
                            充值金额：
                        </view>
                        <input class="flex-sub" value="" @input="rechargeFun" :placeholder="phone" placeholder="请输入充值金额" type="digit" />
                    </view>
                    <view class="recharge2-title">
                        <view class="recharge-text2">赠送金额：</view>
                        <input class="flex-sub" value="" @input="giveawayFun" placeholder="请输入赠送金额" type="digit" />
                    </view>
                    <view></view>
                </view>
            </view>
            <view class="base-box">
                <view class="opcard-botton" @tap="opcardbotton3">
                    <view class="opcard-bottonbnt">
                        {{ buttontype }}
                    </view>
                </view>
            </view>
        </view>
        <!-- 新顾客 -->
        <view class="cardsale-conter" v-if="memberStatus == 0">
            <view class="cardsale-title">
                <view class="title-name1">小意助手</view>
                <view class="title-name2">新顾客，请完善信息：</view>
            </view>
            <view class="box">
                <view class="centers" @tap="afterRead1">
                    <view class="iconbox">
                        <image :src="headImg ? headImg : shopimgUrl + 'photo.png'"></image>
                    </view>
                </view>
            </view>
            <view class="box">
                <view class="h-86 centers">
                    <view class="margin-right-sm">顾客姓名：</view>
                    <input class="flex-sub" :value="name" @input="getname" placeholder="请输入顾客姓名" maxlength="10" />
                    <view class="radio-boxs">
                        <radio-group @change="radioChange">
                            <label class="radio">
                                <radio value="1" :checked="true" />
                                男
                            </label>
                            <label class="radio">
                                <radio value="2" />
                                女
                            </label>
                        </radio-group>
                    </view>
                </view>
                <view class="h-86 centers">
                    <view class="margin-right-sm ada-lt">
                        <view class="margin-right-sm">顾客生日：</view>
                        <view @tap="showTime"></view>
                        <picker mode="date" :value="date" @change="bindDateChange">
                            <view class="picker">
                                <text class="select-birthday">{{ date }}</text>
                            </view>
                        </picker>
                    </view>
                    <view class="radio-boxs">
                        <radio-group @change="radiocalendar">
                            <label class="radio">
                                <radio value="1" :checked="true" />
                                阳历
                            </label>
                            <label class="radio">
                                <radio value="2" />
                                阴历
                            </label>
                        </radio-group>
                    </view>
                </view>
                <view class="h-86 centers">
                    <view class="margin-right-sm">备注信息：</view>
                    <input class="flex-sub" :value="info" @input="getinfo" placeholder="请输入备注信息" maxlength="10" />
                </view>
            </view>
            <!-- 充值 -->
            <view class="recharge-box" v-if="type == 2">
                <view class="recharge-title">
                    <view class="cli"></view>
                    <view class="recharge-text">充值信息</view>
                </view>
                <view class="recharge2-title">
                    <view class="recharge-text">
                        <text style="color: #e94a18">*</text>
                        充值金额：
                    </view>
                    <input class="flex-sub" value="" @input="rechargeFun" :placeholder="phone" placeholder="请输入充值金额" type="digit" />
                </view>
                <view class="recharge2-title">
                    <view class="recharge-text2">赠送金额：</view>
                    <input class="flex-sub" value="" @input="giveawayFun" placeholder="请输入赠送金额" type="digit" />
                </view>
                <view></view>
            </view>
            <view class="base-box" v-if="memberStatus == 1">
                <view class="opcard-botton" @tap="opcardbotton3">
                    <view class="opcard-bottonbnt">
                        {{ buttontype }}
                    </view>
                </view>
            </view>
            <view class="base-box2">
                <view class="opcard-botton2" @tap="toindex">
                    {{ btnLeft }}
                </view>
                <view class="opcard-botton2" @tap="opcardbotton">
                    {{ btnRight }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pagesc/cardsale/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

export default {
    data() {
        return {
            recharge: '',
            giveaway: '',
            buttontype: '帮他开张新卡',

            memberLists: {
                mobile: '',
                userName: ''
            },

            memberid: '',
            serviceCard: [],

            memberList: {
                headPicture: '',
                userName: '',
                storeVip: '',
                mobile: '',
                memberVip: '',
                balance: ''
            },

            iscode: '',
            memberStatus: '',
            ishint2: '',
            info: '',
            shopId: '',
            showtime: false,
            date: '请选择生日>',
            showModal: false,
            phone2: '',
            name: '',
            gender: 1,

            // 默认是男
            calendar: 1,

            //默认阳历
            phone: '',

            iconpo: '/static/images/profile-hai.png',
            baseurl: app.globalData.baseurl,

            //全局baseurl路径
            shopimgUrl: app.globalData.shopimgUrl,

            btnLeft: '只保存不开卡',
            btnRight: '帮他开张新卡',
            isDisabled: true,
            type: '',
            ajxtrue: false,
            ishint: false,
            headImg: '',
            isNaa: '',
            serviceList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            type: Number(options.type)
        });

        if (Number(options.type) === 2) {
            this.setData({
                buttontype: '下一步',
                btnLeft: '只保存不充值',
                btnRight: '下一步'
            });
            uni.setNavigationBarTitle({
                title: '会员充值'
            });
        }

        if (Number(options.type) === 3) {
            this.setData({
                btnLeft: '只保存不收银',
                btnRight: '下一步'
            });
            uni.setNavigationBarTitle({
                title: '创建会员'
            });
        }

        if (Number(options.type) === 4) {
            this.setData({
                buttontype: '下一步',
                btnLeft: '只保存不开创客',
                btnRight: '帮他开张创客'
            });
            uni.setNavigationBarTitle({
                title: '创客开单'
            });
        }

        if (options.phone) {
            this.setData({
                phone: options.phone
            });
        }

        if (options.memberid) {
            memberid: options.memberid;
        }

        console.log('313', options);

        if (options.memberStatus) {
            this.setData({
                memberStatus: options.memberStatus
            });
        }

        if (options.shopId) {
            this.setData({
                shopId: options.shopId
            });
        }

        if (options.memberList) {
            this.setData({
                memberList: JSON.parse(options.memberList)
            });
        }

        if (options.serviceCard) {
            this.setData({
                serviceCard: JSON.parse(options.serviceCard)
            });
        }

        if (options.memberid) {
            this.setData({
                memberid: options.memberid
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        bindDateChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value);
            this.setData({
                date: e.detail.value
            });
        },

        ElasticFrameClick: function () {
            this.setData({
                showModal: true
            });
        },

        done() {
            this.setData({
                showModal: false
            });
        },

        rechargeFun(e) {
            var recharge = e.detail.value;
            this.setData({
                recharge: recharge
            });
        },

        giveawayFun(e) {
            var giveaway = e.detail.value;
            this.setData({
                giveaway: giveaway
            });
        },

        inquire2() {
            this.getMemberByMobile(this.phone2);
        },

        opcardbotton3() {
            const { shopId, memberid, memberList, recharge, giveaway, type } = this;
            let memberLists = JSON.stringify(memberList);

            if (type == 1) {
                uni.navigateTo({
                    url: '/pagesc/helpcard/index?shopId=' + shopId + '&memberid=' + memberid + '&memberList=' + memberLists + '&hangType=' + '4'
                });
            } else if (type == 2) {
                if (recharge == '') {
                    uni.showToast({
                        title: '请先输入充值金额',
                        icon: 'none'
                    });
                    return;
                } // if (giveaway == '') {
                //   wx.showToast({
                //     title: '请先输入赠送金额',
                //     icon: 'none'
                //   })
                //   return
                // }

                uni.navigateTo({
                    url:
                        '/pagesc/helpcard/index?shopId=' +
                        shopId +
                        '&memberid=' +
                        memberid +
                        '&memberList=' +
                        memberLists +
                        '&recharge=' +
                        recharge +
                        '&giveaway=' +
                        giveaway +
                        '&type=' +
                        type +
                        '&hangType=' +
                        '5'
                });
            } else if (type == 4) {
                uni.navigateTo({
                    url: '/pagesc/makerbilling/index?shopId=' + shopId + '&memberid=' + memberid + '&memberList=' + memberLists + '&hangType=' + '2'
                });
            }
        },

        opcardbotton2() {
            this.savaMember();
            const { shopId, memberid, memberList } = this;
            let memberLists = JSON.stringify(memberList);
            uni.navigateTo({
                url: '/pagesc/helpcard/index?shopId=' + shopId + '&memberid=' + memberid + '&memberList=' + memberLists
            });
        },

        toShowModal(e) {
            this.setData({
                showModal: true
            });
        },

        // 显示时间弹窗
        showTime() {
            this.setData({
                showtime: true
            });
        },

        // 关闭窗口
        onCloseTime() {
            this.setData({
                showtime: false
            });
        },

        // 手机号验证
        blurPhone: function (e) {
            var phone = e.detail.value;
            console.log('a', phone);
            let that = this;

            if (!/^1[345678]\d{9}$/.test(phone)) {
                this.setData({
                    ajxtrue: false,
                    ishint: true,
                    phone: phone,
                    isDisabled: true
                });

                if (phone == '') {
                    this.setData({
                        ishint: false,
                        phone: phone,
                        isDisabled: true
                    });
                }

                if (phone.length >= 11) {
                    this.setData({
                        ajxtrue: false,
                        ishint: true,
                        phone: phone,
                        isDisabled: true
                    });
                }
            } else {
                this.setData({
                    ajxtrue: true,
                    ishint: false,
                    phone: phone,
                    isDisabled: false
                });
            }
        },

        // 手机号2验证
        blurPhone2: function (e) {
            var phone = e.detail.value;
            console.log('a', phone);
            let that = this;

            if (!/^1[345678]\d{9}$/.test(phone)) {
                this.setData({
                    ajxtrue: false,
                    ishint2: true,
                    phone2: phone,
                    isDisabled: true
                });

                if (phone == '') {
                    this.setData({
                        ishint2: false,
                        phone2: phone,
                        isDisabled: true
                    });
                }

                if (phone.length >= 11) {
                    this.setData({
                        ajxtrue: false,
                        ishint2: true,
                        phone2: phone,
                        isDisabled: true
                    });
                }
            } else {
                this.setData({
                    ajxtrue: true,
                    ishint: false,
                    phone2: phone,
                    isDisabled: false
                });
            }
        },

        // 头像
        afterRead1() {
            let _this = this;

            uni.chooseImage({
                success(res) {
                    console.log('res', res.tempFilePaths); // const tempFilePaths = res.tempFilePaths

                    const tempFilePaths = res.tempFilePaths[0];
                    console.log('tempFilePaths', tempFilePaths);
                    uni.uploadFile({
                        url: _this.baseurl + '/store-api/file/upload',
                        filePath: tempFilePaths,
                        name: 'file',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const headImg = JSON.parse(res.data).data;

                            _this.setData({
                                headImg
                            });
                        },

                        fail(error) {
                            console.log(error);
                        },

                        complete(res) {
                            console.log(res);
                        }
                    });
                }
            });
        },

        // 男女
        radioChange(e) {
            this.setData({
                gender: e.detail.value
            });
        },

        getname(e) {
            this.setData({
                name: e.detail.value
            });
        },

        getinfo(e) {
            this.setData({
                info: e.detail.value
            });
        },

        radiocalendar(e) {
            this.setData({
                calendar: e.detail.value
            });
        },

        searchList() {
            // if(this.data.type == 3){
            //   wx.navigateTo({
            //     url: '/pagesc/emptyvip/emptyvip',
            //   })
            // }
            const { phone } = this;
            this.getMemberByMobile(phone);
            setTimeout(() => {
                this.setData({
                    memberStatus: this.memberLists.memberStatus,
                    memberList: this.memberLists
                });
            }, 500);
        },

        // 保存会员
        savaMember: function () {
            const { shopimgUrl, name, gender, calendar, date, info, shopId, headImg, phone } = this;

            if (!headImg) {
                uni.showToast({
                    title: '请选择头像',
                    icon: 'none'
                });
                return;
            }

            if (!name) {
                uni.showToast({
                    title: '请输入名字',
                    icon: 'none'
                });
                return;
            }

            if (date == '请选择生日>') {
                uni.showToast({
                    title: '请选择生日',
                    icon: 'none'
                });
                return;
            }

            if (!info) {
                uni.showToast({
                    title: '请填写备注',
                    icon: 'none'
                });
                return;
            }

            _request
                .postObj('/cashier/savaMember', {
                    headPicture: headImg,
                    shopId: uni.getStorageSync('shopId'),
                    birthdayType: calendar,
                    userName: name,
                    birthday: date,
                    sex: gender,
                    remark: info,
                    mobile: phone
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'none'
                        });
                    }

                    console.log('aa', res);
                    this.setData({
                        iscode: res.data.code,
                        memberList: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 根据手机号码查询会员
        getMemberByMobile(phone) {
            _request
                .get('/cashier/getMemberByMobile', {
                    shopId: uni.getStorageSync('shopId'),
                    mobile: phone
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let obj = res.data.data;
                        obj instanceof Object;

                        if (obj instanceof Object == false) {
                            uni.showToast({
                                title: res.data.data,
                                icon: 'none'
                            });
                        }

                        console.log('obj instanceof Object', obj instanceof Object);
                        console.log('3', res);
                        this.setData({
                            memberLists: res.data.data,
                            memberid: res.data.data.memberId,
                            isNaa: obj instanceof Object
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //替换
        replace() {
            // this.getMemberByMobile(this.data.phone2)
            this.setData({
                memberList: this.memberLists,
                showModal: false
            });
        },

        //保存
        toindex() {
            this.savaMember();
            setTimeout(() => {
                if (this.iscode == 200) {
                    uni.navigateTo({
                        url: '/pagesc/index/index'
                    });
                }
            }, 500);
        },

        //帮他开卡
        opcardbotton() {
            this.savaMember();
            setTimeout(() => {
                if (this.iscode == 200) {
                    const { memberList, type, recharge, giveaway } = this;
                    let memberLists = JSON.stringify(memberList);

                    if (type == 1) {
                        uni.navigateTo({
                            url: '/pagesc/helpcard/index?memberList=' + memberLists + '&type=' + type
                        });
                    } else if (type == 2) {
                        if (recharge == '') {
                            uni.showToast({
                                title: '请先输入充值金额',
                                icon: 'none'
                            });
                            return;
                        }

                        uni.navigateTo({
                            url: '/pagesc/helpcard/index?memberList=' + memberLists + '&recharge=' + recharge + '&giveaway=' + giveaway + '&type=' + type
                        });
                    } else if (type == 3) {
                        uni.navigateTo({
                            // url: '/pagesc/makerbilling/index',//应该是调错路径了
                            // url: '/pagesc/ordercashier/ordercashier',
                            url:
                                '/pagesc/ordercashier/ordercashier?type=2&memberStatus=' +
                                this.memberStatus +
                                '&phone=' +
                                this.phone2 +
                                '&shopId=' +
                                uni.getStorageSync('shopId') +
                                '&memberList=' +
                                memberLists +
                                '&serviceCard=' +
                                this.serviceCard +
                                '&memberid=' +
                                this.memberid
                        });
                    } else if (type == 4) {
                        uni.navigateTo({
                            url: '/pagesc/makerbilling/index?memberList=' + memberLists + '&type=' + type
                        });
                    }
                }
            }, 500);
        },

        hideModal() {
            console.log('占位：函数 hideModal 未声明');
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        }
    }
};
</script>
<style>
/* pagesc/cardsale/index.wxss */
page {
    background: #fff;
}

.page {
    overflow-x: hidden;
}

.cardsale-box {
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/cardsale_banner.png');
    width: 100%;
    height: 330rpx;
    padding: 0rpx 20rpx;
    background-size: 100% 100%;
}

.phone-box {
    height: 100rpx;
    line-height: 120rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.input-phone {
    width: 680rpx;
    height: 80rpx;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(233, 74, 24, 0.2);
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    padding-left: 30rpx;
    align-items: center;
    justify-content: space-between;
}

.input-phone-up {
    width: 590rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    border-radius: 40px;
    margin: 0 auto;
    padding-left: 20rpx;
}

.placeholder-style {
    color: #ffffff !important;
}

.placeholder-style2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.inquire {
    text-align: center;
    width: 130rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(233, 74, 24, 0.16);
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    margin-right: 10rpx;
}

.inquire2 {
    text-align: center;
    width: 130rpx;
    line-height: 60rpx;
    height: 60rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 10rpx;
}

.cardsale-conter {
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    margin-top: -20rpx;
    padding: 0rpx 20rpx;
}

.cardsale-title {
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: flex-end;
}

.title-name1 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}

.title-name2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 20rpx;
}

.cardsales-max {
    width: 710rpx;
    height: 126rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
}

.mybkkdbox {
    display: flex;
}

.mybkkd {
    text-align: center;
    writing-mode: vertical-lr;
    display: block;
    background-color: #e94a18;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    width: 6rpx;
    height: 126rpx;
    background: #e94a18;
    border-radius: 10rpx;
}

.mybkkd-lt {
    margin-left: 36rpx;
    height: 75rpx;
    margin-top: 15rpx;
}

.mybkkd-time {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.mybkkd-name {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 15rpx;
}

.to-cardsale {
    width: 140rpx;
    text-align: center;
    line-height: 60rpx;
    height: 60rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 20rpx;
}

.phone-hint {
    color: #ffffff;
    font-size: 24rpx;
}

.shop-message {
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
}

.shop-lt {
    width: 354rpx;
    height: 80rpx;
    border-right: 1rpx solid #f1f1f1;
    display: flex;
}

.lt-profile {
    width: 80rpx;
    height: 80rpx;
    /* background: linear-gradient(0deg, #F1AA14 0%, #FB7099 100%); */
    border: 2rpx solid #ffffff;
    border-radius: 50%;
    margin-left: 20rpx;
}

.lt-name {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 13rpx;
}
.userNameaa {
    width: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lt-namess {
    display: flex;
    align-items: center;
}
.lt-shopvip {
    height: 32rpx;
    background-color: rgba(233, 74, 24, 0.1);
    border-radius: 4rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    padding: 0rpx 10rpx;
    margin-left: 10rpx;
}

.girl2 {
    width: 100rpx;
    height: 100rpx;
    margin-right: 29rpx;
    border-radius: 50%;
}
.recharge-text {
    width: 176rpx;
    text-align: right;
    display: flex;
}
.recharge-text2 {
    width: 176rpx;
    text-align: right;
}

.lt-phone {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.shop-rl {
    width: 354rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
    justify-content: space-between;
}

.rl-vip {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.rl-remaining {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.rl-vipbox {
    margin-left: 28rpx;
}

.replace {
    width: 54rpx;
    height: 54rpx;
    margin-right: 15rpx;
}

.type-cardbox {
    width: 100%;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(233, 74, 24, 0.1);
    border-radius: 10rpx;
    margin-top: 30rpx;
}

.shopcard-title {
    width: 100%;
    height: 71rpx;
    line-height: 71rpx;
    background-size: 100% 100%;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/shopcard_title3.png');
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title2-name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #883d01;
    margin-left: 21rpx;
    width: 560rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cicard {
    width: 82rpx;
    height: 45rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/ci-card.png');
    background-size: 100% 100%;
    line-height: 36rpx;
}

.cicard-info {
    height: 120rpx;
    display: flex;
    align-items: center;
}

.cicard-infoconter {
    height: 66rpx;
    margin-left: 20rpx;
    width: 100%;
}

.cards-name {
    width: 700rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cards-bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-time {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.frequency {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    margin-right: 20rpx;
}

.base-box {
    width: 100%;
    height: 200rpx;
}

.base-box2 {
    display: flex;
}

.opcard-botton {
    border-top: 1rpx solid #dcdcdc;
    box-shadow: 2rpx -9rpx 20rpx 0rpx rgba(160, 159, 159, 0.1);
    width: 100%;
    height: 200rpx;
    background: #e94a18;
    text-align: center;
    line-height: 80rpx;
    color: #ffffff;
    position: fixed;
    bottom: 0rpx;
    background-color: #fff;
}

.opcard-bottonbnt {
    width: 660rpx;
    height: 80rpx;
    background: #e94a18;
    border-radius: 40rpx;
    font-size: 26rpx;
    margin: 0rpx auto;
    text-align: center;
    line-height: 80rpx;
    color: #ffffff;
    margin-top: 30rpx;
}

.box {
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.card-li {
    color: #e94a18;
}

.ada-lt {
    display: flex;
}

.centers {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333333;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}

.select-birthday {
    text-align: left;
    color: #e94a18;
}

.iconbox {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.iconbox image {
    height: 138rpx;
    width: 138rpx;
    z-index: 3;
    border-radius: 50%;
}

.text {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    width: 160rpx;
}

.text1 {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    width: 160rpx;
}

.placeholder-class {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.h-86 {
    width: 100%;
    height: 99rpx;
    border-bottom: 1px solid #e5e5e5;
}

.radio {
    margin: 0 20rpx;
}

/* 未选中的样式 */
radio .wx-radio-input {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    /* 圆角 */
    /* border: 2rpx solid red; */
}

/* 选中后 背景及勾 的样式 */
radio .wx-radio-input.wx-radio-input-checked::before {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    /* 圆角 */
    line-height: 28rpx;
    text-align: center;
    font-size: 20rpx;
    /* 勾大小 */
    color: #fff;
    /* 白色勾  */
    background: #ff8722;
    transform: translate(-50%, -50%) scale(1);
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 30rpx 30rpx 0 30rpx;
    position: absolute;
    bottom: 230rpx;
    z-index: 99;
}

.moudle {
    width: 710rpx;
    box-shadow: 2px 2px 8px 2px rgba(241, 241, 241, 0.4);
}

.bar_btn {
    width: 670rpx;
    line-height: 90rpx;
    position: fixed;
    bottom: 60rpx;
    left: 40rpx;
}

.radio-boxs {
    width: 280rpx;
}

.opcard-botton2 {
    width: 320rpx;
    height: 80rpx;
    background: #e94a18;
    text-align: center;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin: 128rpx auto;
    color: #ffffff;
    font-size: 26rpx;
}

/* 模态框 */
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}

/* 白色背景 */
.modal-content {
    position: fixed;
    top: 380rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 500rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}

.modal_title {
    height: 130rpx;
    display: flex;
    align-items: center;
    padding-left: 22rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    /* border-radius: 20rpx 20rpx 0px 0px; */
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 130rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox {
    text-align: center;
    height: 113rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}

.qrcodetext {
    margin: 0 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}

.qrcodeimage {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
}

.qrcodespan {
    display: block;
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 20rpx;
}

.modal_titleicon {
    width: 82rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.modal_titletext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
}

.modal_textarea {
    height: 395rpx;
    width: calc(100% - 40rpx);
    margin: 20rpx;
    overflow: visible !important;
}

.done {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}

.modal_textarea textarea {
    height: 100%;
    width: 100%;
}

.qrcodeicon {
    width: 540rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.qrcodeiconbox {
    margin-top: 48rpx;
    width: 100rpx;
    text-align: center;
}

.wechattext {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.wechatvip {
    width: 100rpx;
    height: 100rpx;
}

.btn {
    height: 70rpx;
    width: 390rpx;
    background-color: #5a94ff;
    color: #fff;
    text-align: center;
    line-height: 70rpx;
    border-radius: 50rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    overflow: visible;
}

/* 底部电话弹窗 */

.zindex-99 {
    z-index: 99;
}

.overlaybox {
    position: absolute;
    bottom: 170rpx;
    margin: 100rpx 20rpx;
    width: 710rpx;
    background-color: white;
    border-radius: 20rpx;
}

.overlaybox1 {
    height: 100rpx;
    border-radius: 80rpx;
    line-height: 100rpx;
    text-align: center;
    color: #007aff;
}

.overlaytext1 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
    line-height: 50rpx;
}

.overlaytext2 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin: 100rpx 20rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #007aff;
    position: absolute;
    bottom: 50rpx;
}

.time-box2 {
    width: 210rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.time-left {
    width: 21rpx;
    height: 15rpx;
}

.replace-box {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.replace-lt {
    display: flex;
    align-items: center;
    height: 80rpx;
    margin-left: 20rpx;
}

.girl {
    width: 80rpx;
    height: 80rpx;
    margin-right: 22rpx;
}

.lt-nname {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    text-align: left;
}

.lt-hpone2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.replace-rl {
    width: 120rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 54rpx;
    margin-right: 10rpx;
    text-align: center;
}

.done {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}

.recharge-box {
    /* width: 100%; */
    height: 300rpx;
    border-top: 20rpx solid #f1f1f1;
    margin: 0rpx -20rpx;
}

.cli {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
    margin-right: 10rpx;
}

.recharge-title {
    display: flex;
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    align-items: center;
    height: 99rpx;
    line-height: 99rpx;
    padding: 0rpx 40rpx;
    border-bottom: 1rpx solid #e5e5e5;
    margin: 0rpx -20rpx;
}
.recharge2-title {
    display: flex;
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    align-items: center;
    height: 99rpx;
    line-height: 99rpx;
    padding: 0rpx 20rpx;
    border-bottom: 1rpx solid #e5e5e5;
}
</style>
